<template>
	<view>
		<image src="/static/img/httpindex/login/login_bg.png"
			style="width: 100vw;height:520rpx;position: absolute;top:0;" mode="widthFix"></image>

		<u-navbar title="每日任务" :autoBack="true" :bgColor="bgColor" leftIconColor="#fff"
			titleStyle="color:#fff"></u-navbar>
		<!-- <view style="padding-top: 70rpx;;display: flex;align-items: center;justify-content: center;position: relative;">
			<image @click="backPage" src="/static/zuo.png"
				style="width:20rpx;height:36rpx;position: absolute;left: 30rpx;top: 50%;transform: translateY(-50%);"
				mode="" />
			<view @click="changeTab(0)" class="tab_txt"
				:style="tabIndex==0 ?'border-bottom:2px solid #fff':'border-bottom:2px solid transparent'"
				style="margin-right: 46rpx;">每日任务</view>
			<view @click="changeTab(1)" class="tab_txt"
				:style="tabIndex==1 ?'border-bottom:2px solid #fff':'border-bottom:2px solid transparent'">进阶任务</view>
		</view> -->
		<!-- 每日任务 -->
		<view v-if="tabIndex==0" class="content">
			<view class="card_main" style="height: 280rpx;">
				<view style="display: flex;justify-content: space-between;align-items: center;">
					<view style="font-size: 28rpx;color:#121212;font-weight: 600;">已连续签到<text
							style="color: #FF0000;font-size:26rpx;margin: 0 8rpx;">{{signs}}</text>天</view>
					<view style="color: #121212;font-size: 22rpx;display: flex;align-items: center;">
						<image src="@/static/img/user/rili.png" style="width: 24rpx;height:24rpx;margin-right: 6rpx;"
							mode="" />
						签到日历
					</view>
				</view>
				<view class="top_week">
					<view class="top_week_card" v-for="(sitem,sindex) in list" :key="sindex">
						<image :src="sitem.src" style="width: 50rpx;height:50rpx;margin-bottom: 6rpx;" mode="" />
						{{sitem.date}}
					</view>
				</view>

				<view class="" style="position: absolute;bottom:40rpx;">
					<u-alert v-if="isSigned == false" title="" type="error" fontSize="13"
						description="说明:完成以下视频任务即可自动签到！！！"></u-alert>
					<u-alert v-else title="" type="primary" fontSize="13" description="说明:今日已完成签到！！！"></u-alert>
				</view>

				<!-- <view style="display: flex;justify-content: center;margin-top: 50rpx;">
					<view class="rec_btn">立即签到</view>
				</view> -->
			</view>
			<view class="card_main" style="margin-top: 20rpx;padding-bottom: 12rpx;">
				<view style="font-size: 28rpx;color:#121212;font-weight: 600;">视频任务</view>

				<view style="display: flex;align-items: center;justify-content: space-between;margin:24rpx 0rpx;">
					<view style="display: flex;align-items: center;">
						<view class="" style="display: flex;align-items: center;" v-for="(titem,tindex) in tasks"
							:key="tindex">
							<view class="" style="display: flex;align-items: center;" v-if="isSigned == false">
								<view :class="tindex < currentIndex?'active_line':'big_line'"></view>
								<view :class="tindex < currentIndex?'active_text':'center_text'">{{tindex + 1}}</view>
							</view>
							<view class="" style="display: flex;align-items: center;" v-else>
								<view class="active_line"></view>
								<view class="active_text">{{tindex + 1}}
								</view>
							</view>
						</view>
					</view>
					<image src="@/static/img/user/sign_prize.png" style="width: 80rpx;height:80rpx;" mode="" />
				</view>
				<!-- 每一个 -->
				<view class="videoCon_eve" v-for="(titem,tindex) in tasks" :key="tindex">
					<view class="videoCon_eve_left">
						<image style="width: 90rpx;height: 90rpx;border-radius: 50%;margin-right: 30rpx;"
							src="@/static/img/user/video.png" mode="" />
						<view class="summary">
							<p class="title">{{titem.name}}</p>
							<!-- <p class="guild">每日发布两条视频</p> -->
						</view>
					</view>
					<view class="" v-if="isSigned == false">
						<view class="completeBtn success_txt" v-if="tindex < currentIndex">已完成
						</view>
						<view class="completeBtn" v-else>未完成</view>
					</view>
					<view class="" v-else>
						<view class="completeBtn success_txt">已完成</view>
					</view>
				</view>
			</view>

			<view class="" style="position: relative;padding: 30rpx;" v-if="isSigned == false">
				<view class="video" @tap="goSign()">去完成</view>
			</view>

		</view>
		<!-- 进阶任务 -->
		<!-- <view v-if="tabIndex==1" style="position: relative;margin-top:40rpx;"> -->
		<!-- <view class="card_main" style="height: 320rpx;">
				<view
					style="font-size: 28rpx;color:#121212;font-weight: 600;border-bottom: 1rpx solid #F6F6F6;padding-bottom: 30rpx;">
					短视频广告任务<text
						style="color: #999999;font-size:22rpx;margin: 0 8rpx;font-weight: 500;">每日观看发现视频满5条广告奖励3积分</text>
				</view>
				<view class="award" style="justify-content: flex-end;">
					<view class="award_right">
						<image style="width: 20rpx;height: 20rpx;margin-right: 14rpx;" src="" mode="" />
						<span>完成奖励5积分</span>
					</view>
				</view> -->
		<!-- uview 进度条 -->
		<!-- <u-line-progress :percentage="30" :showText="false" height="5" activeColor="#FF420A"
					inactiveColor="#EEEEEE"></u-line-progress>
				<view class="msg">已观看<span>0分钟</span></view>
				<view style="display: flex;justify-content: center;margin-top: 50rpx;">
					<view class="rec_btn">去完成</view>
				</view>
			</view> -->
		<!-- <view class="card_main" style="margin-top: 20rpx;padding-bottom: 12rpx;">
				<view style="font-size: 28rpx;color:#121212;font-weight: 600;">直播任务<text
						style="color: #999999;font-size:22rpx;margin: 0 8rpx;font-weight: 500;">完成直播任务。可获得消费贡献积分</text>
				</view> -->
		<!-- 每一个 -->
		<!-- <view class="listEve">
					<view class="current">
						<image style="width: 50rpx;height: 30rpx;margin-right: 14rpx;"
							src="https://img2.baidu.com/it/u=1229947238,3197261640&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
							mode="" />
						<span>带货类直播</span>
					</view>
					<view class="award">
						<span class="award_left">观看25分钟，完成奖励5积分</span>
						<view class="award_right">
							<image style="width: 20rpx;height: 20rpx;margin-right: 14rpx;" src="" mode="" />
							<span>完成奖励5积分</span>
						</view>
					</view> -->
		<!-- uview 进度条 -->
		<!-- <u-line-progress :percentage="30" :showText="false" height="5" activeColor="#FF420A"
						inactiveColor="#EEEEEE"></u-line-progress>
					<view class="msg">已观看<span>0分钟</span></view> -->
		<!-- </view> -->
		<!-- </view> -->
		<!-- </view> -->
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import nnad from '@/common/nnad.js'
	export default {
		data() {
			return {
				bgColor: '#20bebb',
				tabIndex: 0,
				isSigned: false,
				signs: 0,
				list: [],

				currentIndex: 0,
				tasks: [],
			}
		},

		computed: {
			...mapState(['hasLogin', 'userInfo']),
		},

		onLoad() {
			if (!this.hasLogin) {
				this.$api.msg('尚未登录，请先登录');
				setTimeout(() => {
					uni.reLaunch({
						url: '/pages/login/login'
					})
				}, 1000)
				return false;
			}

			this.tasks = [{
				name: '每日视频一',
				is_finish: false,
			}, {
				name: '每日视频二',
				is_finish: false,
			}, {
				name: '每日视频三',
				is_finish: false,
			}, {
				name: '每日视频四',
				is_finish: false,
			}, {
				name: '每日视频五',
				is_finish: false,
			}, {
				name: '每日视频六',
				is_finish: false,
			}]

			this.loadData();
			
			this.confirmSign()

		},
		methods: {
			finishTask() {
				this.currentIndex = this.currentIndex + 1;
				this.updateTask();

				this.confirmSign();
			},

			updateTask() {
				let tasks_arr = this.tasks;
				// console.log(this.tasks)
				// console.log(this.currentIndex)
				tasks_arr.forEach((item, index) => {
					if (parseInt(index) < parseInt(this.currentIndex)) {
						item.is_finish = true;
					}
					return item;
				})
				this.tasks = tasks_arr;
			},

			changeTab(index) {
				this.tabIndex = index;
			},
			backPage() {
				uni.navigateBack()
			},

			async loadData() {
				uni.showLoading({
					title: '加载中...'
				});
				let token = uni.getStorageSync('token');

				if (!token) {
					this.$api.msg('token缺失！');
				}
				let url = '/signInit';
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})

				// console.log(res)

				this.signs = res.data.data.sign_days;
				let list = res.data.data.list;
				list.forEach((item) => {
					if (item.flag == true) {
						item.src = "/static/img/user/signed.png"
					} else {
						item.src = "/static/img/user/unsigned.png"
					}
				})
				// console.log(list);
				this.list = list;
				this.isSigned = res.data.data.is_signed;
				this.currentIndex = res.data.data.num;
				this.updateTask();

				uni.hideLoading();
			},

			async goSign() {
				// uni.navigateTo({
				// 	url: '/pages/user/sign_video'
				// })

				let _this = this;
				uni.showLoading({
					title: '加载中...'
				});
				//加载激励视频，并设置回调
				nnad.loadRewardAd('b5f4a261182671', {
					onAdShow() {
						uni.hideLoading();
						nnad.showToast('显示广告');
					},
					onAdBarClick() {
						nnad.showToast('点击广告Bar');
					},
					onVideoComplete() {
						nnad.showToast('广告播放完毕');
					}, //注意：广告可跳过，请勿在此下发奖励给用户
					onVideoError(info, code) {
						uni.hideLoading();
						nnad.showToast(`广告视频播放错误，错误码：${code},错误信息：${info}`);
					},
					onSkippedVideo() {
						nnad.showToast('用户跳过视频');
					},
					onLoadError(info, code) {
						uni.hideLoading();
						nnad.showToast(`广告加载错误，错误码：${code},错误信息：${info}`);
					},
					onLoadSuccess() {
						nnad.showToast('加载成功');
					},
					onVideoCached() {
						nnad.showToast('缓存成功');
					},
					onReward() { // 此处给用户下发奖励
						_this.finishTask();
						nnad.showToast('奖励已发放');
					},
					onAdClose(id) {
						// nnad.showToast(`关闭广告，视频ID为：${id}`);
						nnad.showToast(`广告已关闭`);
					}
				});
			},

			async confirmSign() {
				let url = '/finishView';
				let token = uni.getStorageSync('token');
				let res = await this.$myRequest({
					url: url,
					data: {
						token: token
					},
					methods: 'post'
				})
				
				this.$api.msg(res.data.msg);
				this.loadData()
			}
		}
	}
</script>

<style>
	page {
		background-color: #f9f9f9;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.content {
		position: relative;
		/* #ifdef APP-PLUS */
		top: 180rpx;
		/* #endif */
		/* #ifdef H5 */
		top: 100rpx;
		/* #endif */
	}

	.card_main {
		padding: 30rpx;
		border-radius: 12rpx;
		background: #fff;
		margin: 0 30rpx;
		position: relative;
	}

	.top_week {
		background: #F2FBFF;
		font-size: 22rpx;
		color: #121212;
		border-radius: 12rpx;
		padding: 16rpx 0;
		padding-bottom: 14rpx;
		display: flex;
		align-items: center;
		justify-content: space-around;
		margin-top: 32rpx;
	}

	.top_week_card {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.rec_btn {
		width: 300rpx;
		color: #fff;
		font-size: 26rpx;
		padding: 20rpx 0;
		background: linear-gradient(to right, #ff330d, #ff191e);
		border-radius: 100rpx;
		text-align: center;
		position: absolute;
		bottom: 30rpx;
		left: 50%;
		transform: translateX(-50%);
	}

	.center_text,
	.active_text {
		width: 30rpx;
		height: 30rpx;
		border-radius: 50%;
		text-align: center;
		line-height: 30rpx;
		font-size: 20rpx;
	}

	.center_text {
		background: #eeeeee;
		color: #999999;
	}

	.active_text {
		background: #ff0000;
		color: #ffffff;
	}

	.sma_line {
		width: 36rpx;
		height: 10rpx;
		background: #EEEEEE;
		border-radius: 100rpx 0 0 100rpx;
	}

	.big_line,
	.active_line {
		width: 54rpx;
		height: 10rpx;
	}

	.big_line {
		background: #EEEEEE;
	}

	.active_line {
		background: #ff0000;
	}

	.videoCon_eve {
		padding: 16rpx 0;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.videoCon_eve_left {
		display: flex;
		align-items: center;
	}

	.summary {
		display: flex;
		flex-direction: column;
		justify-content: center;
	}

	.videoCon_eve_left .title {
		font-size: 30rpx;
		font-weight: bold;
	}

	.guild {
		font-size: 22rpx;
		color: #999999;
		margin-top: 6rpx;
	}

	.completeBtn {
		font-size: 24rpx;
		color: #ffffff;
		height: 54rpx;
		line-height: 54rpx;
		padding: 0 36rpx;
		border-radius: 50rpx;
		background-color: #ff2027;
	}

	.success_txt {
		background: #BFBFBF;
	}

	.videoCon {
		background-color: #ffffff;
		padding: 0 40rpx;
		box-sizing: border-box;
		box-shadow: 0px 0px 20rpx rgba(0, 0, 0, 0.1);
	}

	.listEve {
		padding-top: 20rpx;
	}

	.msg {
		font-size: 26rpx;
		color: #4e4e4e;
		margin-top: 20rpx;
	}

	.msg span {
		color: #FF420A;
	}

	.current {
		display: flex;
		align-items: center;
	}

	.current span {
		font-size: 26rpx;
		font-weight: 700;
	}

	.award {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin: 20rpx 0;
	}

	.award_left {
		font-size: 24rpx;
		color: #999999;
	}

	.award_right {
		padding: 8rpx 20rpx;
		background-color: #eeeeee;
		border-radius: 6rpx;
		display: flex;
		align-items: center;
		font-size: 22rpx;
		color: #868686;
	}

	.tab_txt {
		font-size: 32rpx;
		color: #fff;
		padding: 16rpx 0;
		border-bottom: 2px solid #fff;

	}

	.video {
		width: 100%;
		text-align: center;
		background-color: #f84115;
		border-radius: 50rpx;
		font-size: 26rpx;
		color: #ffffff;
		padding: 20rpx 0;
	}
</style>